<template>
    <div class="view-main">
        <div class="view-body">

            <el-form :model="addForm" ref="addForm" :rules="addRules" label-width="100px" class="demo-ruleForm">
                <!-- :gutter 行内每个部分间隔距离 -->
                <!--第一行-->
                <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="案卷名称" prop="name" >
                            <el-input  v-model="addForm.name" placeholder="请输入案卷名称" ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="案卷编号" prop="code">
                            <el-input  v-model="addForm.code" placeholder="请输入案卷编号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!--第二行-->
                <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="案卷类型" prop="type">
                            <el-select  placeholder="请输入案卷类型" v-model="addForm.type">
                                <el-option v-for="item in types" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="案发原由" prop="reason">
                                <el-input  v-model="addForm.reason" placeholder="请输入案发原由"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <!--第三行-->
                <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="承办人"  prop="undertaker" >
                            <el-select  placeholder="请输入承办人" v-model="addForm.undertaker">
                                <el-option v-for="item in undertakers" :label="item.realName" :value="item.realName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="办案部门" prop="department">
                            <el-select  placeholder="请输入办案部门" v-model="addForm.department">
                                <el-option v-for="item in departments" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!--第四行-->
                <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="案发时间"  prop="crimeTime">
                                <el-date-picker type="datetime" placeholder="请输入案发时间" v-model="addForm.crimeTime" style="width: 100%;"
                                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            <!--<el-date-picker type="date"  v-model="addForm.crimeTime" style="width: 100%;"></el-date-picker>-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="案发地点"  prop="address">
                            <el-input v-model="addForm.address" placeholder="请输入案发地点"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!--第五行-->
                <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="案卷描述" prop="description">
                            <el-input v-model="addForm.description" placeholder="请输入案卷描述" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-form-item>
                    <el-button type="primary" @click="submitForm('addForm')">确认</el-button>
                    <el-button @click="resetForm('addForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script>
    import { checkLoginName, checkPhone, checkEmail, checkObj, isEmpty, stringFormat } from '../../utils/util'


    export default {
        name: 'user',
        data() {
            return {
                addForm: {
                    name: '',
                    code: '',
                    crimeTime: '',
                    address: '',
                    reason: '',
                    description: '',
                    department: "",
                    type: "",
                    level: "",
                    undertaker: "",
                    state: ""
                },
                departments: [
                    { value: "徐汇区", label: "徐汇区" },
                    { value: "闵行区", label: "闵行区" },
                    { value: "杨浦区", label: "杨浦区" },
                    { value: "青浦区", label: "青浦区" },
                    { value: "崇明区", label: "崇明区" },
                    { value: "金山区", label: "金山区" }
                ],
                types: [
                    { value: "刑侦案卷", label: "刑侦案卷" },
                    { value: "治安案卷", label: "治安案卷" },
                    { value: "行政案卷", label: "行政案卷" },
                    { value: "工作卷", label: "工作卷" },
                    { value: "侦察卷", label: "侦察卷" }
                ],
                undertakers: [
                ],
                addRules: {
                    // trigger: 'blur'鼠标失去焦点时触发事件
                    name: [{ required: true, message: '请输入案卷名称', trigger: 'blur' }],
                    code: [{ required: true, message: '请选择案卷编号', trigger: 'blur' }],
                    // crimeTime: [{ required: true, message: '请选择案发时间', trigger: 'blur' }],
                    // address: [{ required: true, message: '请输入案发地点', trigger: 'blur' }],
                    // reason: [{ required: true, message: '请输入案发原由', trigger: 'blur' }],
                    // description: [{ required: true, message: '请输入案卷描述', trigger: 'blur' }],
                    // department: [{ required: true, message: '请选择办案部门', trigger: 'blur' }],
                    // type: [{ required: true, message: '请选择案卷类型', trigger: 'blur' }],
                    undertaker: [{ required: true, message: '请选择承办人', trigger: 'blur' }]
                },
                url: {
                    undertakerPage: '/auth/user/info/list',
                    // page: '/jzm/jzStore',
                    // update: '/jzm/jzStore/update/{0}',
                    insert: '/aj/record/insert',
                    // delete: '/jzm/jzStore/delete/{0}',
                }
            }
        },
        created() {
            this.getUndertakers()
        },
        methods: {
            getUndertakers(){
                this.$http.get(this.url.undertakerPage).then(data => {
                    // console.log(data)
                    this.undertakers = data.result
                    // console.log(this.undertakers)
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let _form = JSON.parse(JSON.stringify(this.addForm))
                        // console.log("1111111111")
                        // console.log(_form)
                        var address = this.url.insert
                        this.$http.put(address, _form).then(() => {
                            // this.$refs.addForm.resetFields();
                        })
                        this.$refs.addForm.resetFields();
                        return this.$message.success("创建案卷成功")
                    } else {
                        return this.$message.error("创建案卷失败")
                        // return false;
                    }
                });
            }
            ,
            resetForm(formName) {
                // console.log(this)
                this.$refs[formName].resetFields();
            }
        }
    }
</script>


<style lang="less" scoped>

    .el-input {

    }
</style>